<script setup lang="ts">
    import Tree from "@/components/tree.vue";
    import { onMounted } from "vue";
    import { ref } from "vue";

    const snowContainer = ref<HTMLDivElement>();
    const time = ref<HTMLElement>();

    function process() {
        const snowflake = document.createElement("div");
        snowflake.classList.add("snowflake");

        // 设置雪花的大小和漂浮速度
        const size = Math.random() * 5 + 5; // 雪花的大小（5px 到 10px）
        snowflake.style.width = `${size}px`;
        snowflake.style.height = `${size}px`;

        // 设置雪花的起始位置
        snowflake.style.left = `${Math.random() * 100}vw`; // 随机横坐标（视口宽度范围）

        // 随机设置雪花飘落的速度
        const animationDuration = Math.random() * 3 + 2; // 动画持续时间（2s 到 5s）
        const animationDelay = Math.random() * 5; // 动画延迟（最大延迟5s）

        snowflake.style.animationDuration = `${animationDuration}s`;
        snowflake.style.animationDelay = `${animationDelay}s`;

        // 将雪花添加到容器中
        (snowContainer.value as HTMLDivElement).appendChild(snowflake);

        // 获取当前时间
        const currentDate = new Date();

        // 指定的未来时间（示例：2024年12月31日 23:59:59）
        const targetDate = new Date("2024-12-24T23:59:59");

        // 计算时间差（毫秒）
        // @ts-ignore
        const timeDifference = targetDate - currentDate;

        // 计算天数
        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); // 天数

        // 计算小时数
        const hours = Math.floor(
            (timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        ); // 小时

        // 计算分钟数
        const minutes = Math.floor(
            (timeDifference % (1000 * 60 * 60)) / (1000 * 60)
        ); // 分钟

        // 计算秒数
        const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); // 秒

        (
            time.value as HTMLElement
        ).innerHTML = `${days} Days ${hours} Hours ${minutes} Minutes ${seconds} Seconds until Christmas~`;
    }

    onMounted(() => {
        setInterval(process, 100);
    });
</script>

<template>
    <main>
        <div class="snow" ref="snowContainer"></div>
        <Tree id="tree" />
        <div id="fg">
            <h1>Happy Christmas!</h1>
            <h2 ref="time"></h2>
        </div>
    </main>
</template>

<style lang="scss" scoped>
    main {
        position: relative;
        display: flex;
        justify-content: center;

        #tree {
            font-size: 55rem;
            position: absolute;
            bottom: -64px;
        }

        .snow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100;
        }

        div#fg {
            z-index: 200;
            position: absolute;
            width: 100vw;
            height: 100vh;
            backdrop-filter: blur(2px);
            background-color: rgba(0, 0, 0, 0.37);
            color: antiquewhite;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            flex-direction: column;
            gap: 32px;

            h1 {
                font-size: 96px;
            }
        }
    }
</style>
